<template>
  <el-table-column class-name="order-table-col">
    <template #default="scope">
      <ContentWrap
        :bodyStyle="{ padding: '10px', borderRadius: '0px' }"
        class="!border-rd-none !border-b-none mb-0! bg-[var(--el-table-header-bg-color)]!"
      >
        <el-row
          class="color-[#606266] dark:color-[var(--el-text-color-primary)]"
          style="font-weight: normal"
        >
          <el-col :span="24">
            <div>
              <span>退款订单：{{ scope.row.no }}</span>
              <span class="ml-10px"
                >原销售订单：
                <el-button link type="primary" @click="openOrderDetail(scope.row.orderId)">
                  {{ scope.row.orderNo }}
                </el-button></span
              >
              <!-- <span class="ml-10px">会员姓名：</span>
              <el-tag>{{ scope.row.user?.nickname }}</el-tag>
              <span class="ml-10px">手机号码：{{ scope.row?.user?.mobile }}</span> -->
              <span class="ml-10px">申请员工：</span>
              <span class="ml-10px">申请门店：</span>
              <span class="ml-10px">申请时间：{{ formatDate(scope.row.createTime) }}</span>
              <span class="ml-10px">退款方式： </span>
            </div>
          </el-col>
        </el-row>
      </ContentWrap>

      <el-table
        :ref="setOrderTableRef"
        :border="true"
        :data="[scope.row]"
        :row-class-name="'table-col-row-class'"
        :span-method="spanMethod"
        style="width: 100%"
        class="mb-15px"
      >
        <el-table-column min-width="260" align="center" prop="spuName" label="商品信息">
          <template #default="{ row }">
            <div class="flex">
              <div class="flex items-center">
                <div class="mr-[10px] flex items-center">
                  <el-image
                    :src="row.picUrl"
                    class="!h-[48px] !w-[48px] border-rd-4px"
                    @click="imagePreview(row.picUrl)"
                  >
                    <template #error>
                      <div class="image-slot">
                        <icon icon="ep:picture" />
                      </div>
                    </template>
                  </el-image>
                </div>
                <el-tooltip :content="row.spuName" placement="top">
                  <span class="text-left overflow-hidden">
                    <meton-tag
                      v-if="row?.sales"
                      :is-dict="false"
                      class="mr-5px"
                      effect="dark"
                      type="danger"
                      color="#ff0000"
                      :value="'赠品'"
                    />
                    <meton-tag
                      v-if="row?.spuType == 2"
                      :dict-type="DICT_TYPE.PRODUCT_SPU_TYPE2"
                      :value="row?.skuType"
                      effect="plain"
                    />
                    <meton-tag
                      v-else-if="row?.spuType == 4"
                      :dict-type="DICT_TYPE.PRODUCT_SPU_TYPE4"
                      :value="row?.skuType"
                      effect="plain"
                    />
                    <meton-tag
                      :dict-type="DICT_TYPE.PRODUCT_SPU_TYPE"
                      :value="row?.spuType"
                      effect="plain"
                      v-else
                    />
                    {{ row.spuName }}
                    <meton-tag
                      :is-dict="false"
                      :is-text="true"
                      :value="`${row.specType ? skuSpecFormat(row?.properties) : ''},${row.spuType == 2 ? filterCardAttributes(row, true, true) : ''}`"
                    />
                  </span>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="售后数量" min-width="85">
          <template #default="{ row }">
            {{ row.count }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单实售" min-width="85">
          <template #default="{ row }"> {{ floatToFixed2(row.price) }} 元 </template>
        </el-table-column>
        <el-table-column align="center" label="实付金额" min-width="85">
          <template #default="{ row }"> {{ floatToFixed2(row.payPrice) }} 元 </template>
        </el-table-column>
        <el-table-column align="center" label="资产抵扣" min-width="85">
          <template #default="{ row }"> {{ floatToFixed2(row.payPrice) }} 元 </template>
        </el-table-column>
        <el-table-column align="center" label="欠款金额" min-width="85">
          <template #default="{ row }"> {{ floatToFixed2(row.payPrice) }} 元 </template>
        </el-table-column>
        <el-table-column align="center" label="售后金额" min-width="85">
          <template #default="{ row }">
            <span class="text-red">{{ fenToYuan(row.refundPrice) }} </span> 元
          </template>
        </el-table-column>
        <el-table-column align="center" label="会员" min-width="100">
          <template #default>
            <div class="flex flex-col">
              <el-text>{{ scope.row?.user?.nickname }}</el-text>
              <el-text class="mt-5px">{{ scope.row?.user?.mobile }}</el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="售后状态" align="center" prop="status" min-width="85">
          <template #default="{ row }">
            <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="row.status" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="售后方式" min-width="85">
          <template #default="{ row }">
            <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="row.way" />
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" min-width="130">
          <template #default>
            <slot :row="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </el-table-column>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { floatToFixed2, fenToYuan, skuSpecFormat } from '@/utils'
import * as TradeOrderApi from '@/api/mall/trade/order'
import { OrderVO } from '@/api/mall/trade/order'
import type { TableColumnCtx, TableInstance } from 'element-plus'
import { createImageViewer } from '@/components/ImageViewer'
// import { debounce } from 'lodash-es'
import { useProductUtils } from '@/views/mall/product/hooks/useProduct'
const { filterCardAttributes } = useProductUtils()

defineOptions({ name: 'OrderTableColumn' })

const props = defineProps<{
  list: OrderVO[]
}>()

// const headerStyle = ({ row, columnIndex }: any) => {
//   // 表头第一行第一列占 10
//   // if (columnIndex === 0) {
//   //   row[columnIndex].colSpan = 10

//   // } else {
//   //   // 其余的不要
//   //   row[columnIndex].colSpan = 0
//   //   return {
//   //     display: 'none'
//   //   }
//   // }
//   return {
//     display: 'none'
//   }
// }

interface SpanMethodProps {
  row: TradeOrderApi.OrderItemRespVO
  column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
  rowIndex: number
  columnIndex: number
}

type spanMethodResp = number[] | { rowspan: number; colspan: number } | undefined
const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps): spanMethodResp => {
  const len = props.list.find(
    (order) => order.items?.findIndex((item) => item.id === row.id) !== -1
  )?.items?.length
  // 要合并的列，从零开始
  const colIndex = [12]
  if (colIndex.includes(columnIndex)) {
    // 除了第一行其余的不要
    if (rowIndex !== 0) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
    // 动态合并行
    return {
      rowspan: len!,
      colspan: 1
    }
  }
}

/** 解决 ref 在 v-for 中的获取问题*/
const setOrderTableRef = (el: TableInstance) => {
  if (!el) return
  // 只要第一个表也就是开始的第一行
  // if (el.tableId !== 'el-table_2') {
  //   return
  // }
  // tableHeadWidthAutoDebounce(el)
}
// 头部 col 宽度初始化
// const orderTableHeadWidthList = ref([170, 130, 130, 130, 130, 130, 130, 130, 130, 130])
// 头部宽度自适应
// const tableHeadWidthAutoDebounce = debounce((el: TableInstance) => {
//   tableHeadWidthAuto(el), 500
// }) //计算头部宽度 防抖
// const tableHeadWidthAuto = (el: TableInstance) => {
//   console.log(el)
//   const columns = el.store.states.columns.value
//   if (columns.length === 0) {
//     return
//   }
//   columns.forEach((col: TableColumnCtx<TableInstance>, index: number) => {
//     if (col.realWidth) {
//       orderTableHeadWidthList.value[index] = col.realWidth
//     }
//   })
// }
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}

/** 复制 */
const message = useMessage() // 消息弹窗
import { useClipboard } from '@vueuse/core'
const { copy } = useClipboard() // 初始化 copy 到粘贴板
const copyContent = async (content) => {
  await copy(content)
  message.success('复制成功！')
}
/** 查看订单详情 */
const { push } = useRouter() // 路由跳转

const openOrderDetail = (id: number) => {
  push({ name: 'TradeOrderDetail', params: { id } })
}
</script>
<style lang="scss" scoped>
:deep(.table-col-row-class) {
  --el-table-row-hover-bg-color: transparent;
}
</style>
